<template>
  <view>
    <!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
    <view>
      <u-tabs-swiper
        ref="uTabs"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        active-color="#18C7E1"
        bar-width="200"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <swiper
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
      :style="{ height: windowHeight + 'px' }"
    >
      <swiper-item class="swiper-item">
        <reminder
          planType="1"
          v-if="showTip1"
          v-bind:message="infomate"
        ></reminder>
        <view style="margin: 20upx 30upx 0" class="btns">
          <u-button
            style="background-color: #18c7e1; color: #fff"
            @click="showTips('1')"
            :style="{ backgroundColor: appointment1 ? '#18C7E1' : '#ccc' }"
            v-show="appointment1"
          >
            预约此次接种</u-button
          >
          <u-button
            style="background-color: #18c7e1; color: #fff"
            :style="{ backgroundColor: appointment1 ? '#18C7E1' : '#ccc' }"
            v-show="!appointment1"
          >
            已预约</u-button
          >
        </view>
        <scroll-view
          scroll-y
          style="height: 100%; width: 100%"
          @scrolltolower="onreachBottom"
        >
          <view
            class="u-item"
            style="padding: 30upx"
            v-for="(v, index) in injectPlan"
            :key="index"
          >
            <view class="flex flex-j-b">
              <view class="flex" style="font-size: 30upx; font-weight: 900">
                <view>{{ v.planName }}</view>
                <image
                  src="../../../../static/img/148d4d3772284677b5d871a58aedcd49.png"
                  mode="widthFix"
                  style="width: 70upx; margin-left: 20upx"
                  @click="goTips(v)"
                  v-show="v.tips"
                ></image>
              </view>
              <!-- 	<u-tag text="已预约" type="warning" shape="circle" bg-color="#fff" v-show="v.checkType==1"
								color="#18C7E1" border-color="#18C7E1" 
							 style="margin-right: 15upx;"/>
								<u-tag text="未预约" type="warning" shape="circle" bg-color="#fff" v-show="v.checkType==0"
									color="#f7bb3b" border-color="#f7bb3b" 
									 style="margin-right: 15upx;"/> -->
            </view>
            <view
              v-for="(v1, index1) in v.vaccinesPlans"
              :key="index1"
              @click="goVacDetail(v1, v.id)"
              class="flex flex-j-b item-li uni-item-line"
            >
              <view style="padding-top: 20upx">
                <view>
                  <u-tag
                    :text="v1.type == 1 ? '免费' : '自费'"
                    type="warning"
                    size="mini"
                    bg-color="#fff"
                    :color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                    :border-color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                  />
                  <text
                    style="
                      padding: 0 10upx;
                      display: inline-block;
                      margin-bottom: 20upx;
                    "
                    >{{ v1.vname }}(第{{ v1.num }}/{{ v1.total }}针)</text
                  >
                  <view v-if="v1.type == '2'">
                    <u-tag
                      v-if="v1.adequate == 0"
                      text="库存充足"
                      type="success"
                      size="mini"
                    />
                    <u-tag
                      v-else-if="v1.adequate == 1"
                      text="库存紧缺"
                      type="warning"
                      size="mini"
                    />
                    <u-tag
                      v-else="v1.adequate == 2"
                      text="无库存"
                      type="error"
                      size="mini"
                    />
                  </view>
                </view>
              </view>
              <!-- 							<view class="flex flex-al-c" style="width: 200upx;font-size: 20upx;justify-content: flex-end;">
								<u-tag :text="v1.type=='0'?'未完成':v1.type=='1'?'已完成':'未预约'" type="warning" size="mini"
									bg-color="#fff" :color="v1.type==1?'#18C7E1':'#F78E3A'" 
									:border-color="v1.type==1?'#18C7E1':'#F78E3A'"/>
								<view class="iconfont iconarrow-right" style="font-size: 40upx;color: #C3C3C3;"></view>
							</view> -->
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view
          scroll-y
          style="height: 100%; width: 100%"
          @scrolltolower="onreachBottom"
        >
          <reminder2 planType="2" v-if="showTip2"></reminder2>
          <view style="margin: 20upx 30upx 0" class="btns">
            <u-button
              style="background-color: #18c7e1; color: #fff"
              @click="showTips('2')"
              :style="{ backgroundColor: appointment2 ? '#18C7E1' : '#ccc' }"
              v-show="appointment2"
            >
              预约此次儿保</u-button
            >
            <u-button
              style="background-color: #18c7e1; color: #fff"
              :style="{ backgroundColor: appointment2 ? '#18C7E1' : '#ccc' }"
              v-show="!appointment2"
            >
              已预约</u-button
            >
          </view>
          <view class="c-list">
            <view
              class="c-item"
              style="padding: 20upx 30upx 20upx 40upx"
              v-for="(v, index) in plan"
              :key="index"
              @click="goDetail(v)"
            >
              <view class="flex flex-j-b">
                <view style="font-size: 30upx; font-weight: 900">{{
                  v.planName
                }}</view>
                <view class="flex">
                  <!-- 									<view v-if="v.subscribe">
										<u-tag text="预约" type="error" shape="circle" bg-color="#fff"
											color="#18C7E1" border-color="#18C7E1"/>
									</view> -->
                  <view
                    class="iconfont iconarrow-right"
                    style="font-size: 40upx; color: #c3c3c3"
                  ></view>
                </view>
              </view>
              <view class="uni-item-line" style="padding: 0 0 20upx">
                <view
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-top: 20upx;
                  "
                  >{{ v.sketch }}</view
                >
                <view style="font-size: 20upx; color: #18c7e1">
                  {{
                    v.checkType == 0
                      ? "出生,未完成测量"
                      : v.checkType == 1
                      ? "出生,已完成测量"
                      : "未预约"
                  }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import reminder from "@/components/reminder.vue";
import reminder2 from "@/components/reminder2.vue";
export default {
  components: {
    reminder,
    reminder2,
  },
  data() {
    return {
      list: [
        {
          name: "预防接种",
        },
        {
          name: "儿童保健",
        },
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

      tabs: [{}, {}],
      windowHeight: 800,

      // 待办接种计划
      injectPlan: [],
      // 待办列表
      plan: [],

      appointment1: false, // 第一个接种是否预约
      appointment2: false, // 第一个儿保是否预约

      showTip1: false,
      showTip2: false,

      type: "1",
      tipTit: "",
      community: {},
      infomate: {
        id: "",
        isabs: "",
      },
      sq: "",
    };
  },
  created(options) {
    // if(options.isApp){
    // 	if(options.isApp=='1'){
    // 		this.showTip = true;
    // 	}
    // }
  },
  onBackPress(e) {
    uni.switchTab({
      url: "/pages/home/home",
    });
    return true;
  },
  methods: {
    //获取社区信息
    getUniIntro() {
      let self = this;
      this.config.post("/communityInfo/getCommunityDetail", {}).then((res) => {
        if (res.data.code === 200) {
          this.sq = res.data.data.deptName;
          if (uni.getStorageSync("community")) {
            self.uniDetail = JSON.parse(uni.getStorageSync("community"));
          } else {
            self.uniDetail = res.data.data;
            uni.setStorageSync("community", JSON.stringify(res.data.data));
          }
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    getSysInfo() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.windowHeight = res.windowHeight;
        },
      });
    },
    change(index) {
      this.current = index;
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
    goTips(v) {
      uni.navigateTo({
        url: "/pages/main/pub/little-tips?planId=" + v.id + "&tType=" + "1",
      });
    },
    // 儿童接种疫苗详情
    goVacDetail(v, id) {
      uni.navigateTo({
        url:
          "/pages/main/child/backlog/vaccine-detail?id=" +
          v.vid +
          "&type=0" +
          "&sq=" +
          this.sq +
          "&planId=" +
          id +
          "&vtype=" +
          v.type,
      });
    },
    // 儿童保健详情
    goDetail(v) {
      uni.navigateTo({
        url: "/pages/main/child/backlog/plan-detail?id=" + v.id,
      });
    },
    // 获取接种计划
    getInjectPlan() {
      let self = this;
      // uni.showLoading({
      // 	title: '加载中',
      // 	mask: true
      // });
      // setTimeout(s => {
      // 	uni.hideLoading()
      // }, 5000)
      this.config
        .get("/agency/planChrInoculation/getPlanChrInoculation", {})
        .then((res) => {
          // uni.hideLoading();
          if (res.data.code === 200) {
            self.infomate.id = res.data.data[0].id;
            self.infomate.isabs = res.data.data[0].isAbsence;
            self.injectPlan = res.data.data;
            // //console.log(self.injectPlan)
            // state状态 0：未预约  1：已预约 2 已完成
            if (!res.data.data) return;
            if (self.injectPlan[0].checkType == "0") {
              self.appointment1 = true;
            }
            if (self.injectPlan[0].checkType == "1") {
              self.appointment1 = false;
              self.showTip1 = true;
            }
            if (self.injectPlan[0].checkType == "2") {
              self.appointment1 = true;
              self.showTip1 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 获取待办列表
    getPlan() {
      let self = this;
      // uni.showLoading({
      // 	title: '加载中',
      // 	mask: true
      // });
      // setTimeout(s => {
      // 	uni.hideLoading()
      // }, 5000)
      this.config
        .get("/agency/childCarePlan/getChildCarePlan", {})
        .then((res) => {
          // uni.hideLoading();
          if (res.data.code === 200) {
            self.plan = res.data.data;
            if (!res.data.data) return;
            if (self.plan[0].checkType == "0") {
              self.appointment2 = true;
              self.showTip2 = false;
            }
            if (self.plan[0].checkType == "1") {
              self.appointment2 = false;
              self.showTip2 = true;
            }
            if (self.plan[0].checkType == "2") {
              self.appointment2 = true;
              self.showTip2 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getPlanss() {
      uni.redirectTo({
        url: "/pages/main/child/backlog/backlog-tab",
      });
    },
    // 预约接种跳转
    appInoculate() {
      if (!this.appointment1) return;
      let community = JSON.parse(uni.getStorageSync("community"));
      let obj = {
        deptId: community.deptId, // 社区ID
        planId: this.injectPlan[0].id, // 预约计划ID
        planType: "1", // 预约类型
        type: "1", // 1待办/2预约
        yyxm: "预约接种",
        yysq: community.deptName,
        vtype: 1,
      };
      // 儿童接种、儿童保健、儿童门诊、孕妇产检、孕妇接种、孕妇门诊、老年人体检、
      // 老年人接种、老年人门诊、普通人接种、普通人门诊
      uni.navigateTo({
        url: "/pages/main/child/backlog/calendar?data=" + JSON.stringify(obj),
      });
    },
    // 点击儿童保健跳转预约
    appPlan() {
      if (!this.appointment2) return;
      let community = JSON.parse(uni.getStorageSync("community"));
      let obj = {
        deptId: community.deptId, // 社区ID
        planId: this.plan[0].id, // 预约计划ID
        planType: "2", // 预约类型
        type: "2", // 1待办/2预约
        yyxm: "儿童保健",
        yysq: community.deptName,
      };
      uni.navigateTo({
        url: "/pages/main/child/backlog/calendar?data=" + JSON.stringify(obj),
      });
    },
    // 预约提示弹窗
    showTips(type) {
      if (type == 1) {
        if (!this.appointment1) return;
      }
      if (type == 2) {
        if (!this.appointment2) return;
      }
      this.type = type;
      if (type == "1") this.tipTit = "接种";
      if (type == "2") this.tipTit = "儿保";
      // let community = JSON.parse(uni.getStorageSync('community'));
      // this.community = community;
      if (this.type == "1") this.appInoculate();
      if (this.type == "2") this.appPlan();
    },
  },
  onLoad() {
    this.getUniIntro();
  },
  onShow() {
    this.getInjectPlan();
    this.getSysInfo();
    this.getPlan();
    this.getInjectPlan();
  },
};
</script>

<style lang="less" scoped>
.item-li {
  padding: 20upx 0;
}

.btns {
  position: relative;
  width: 94%;
  left: -1%;
  z-index: 999;
}

.u-item {
  margin-top: 30rpx;
}
.u-item:last-child {
  overflow-y: scroll;
  margin-bottom: 500rpx !important;
}
.c-list {
  margin-top: 30rpx;
}
</style>
